<template>
  <div class="login">
    <el-card class="box-card">
      <template #header>
        <div class="clearfix">
          <span>学生后台管理系统</span>
        </div>
      </template>

      <!-- <el-form label-width="80px" :model="form" ref="form" :rules="rules">
        <el-form-item label="用户名" class="item" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" class="item">
          <el-input type="password" v-model="form.password"></el-input> -->
      <el-form
        label-width="80px"
        :model="userInfo"
        ref="ref_form"
        :rules="rules"
      >
        <el-form-item label="用户名" prop="user_name" class="item">
          <el-input v-model.trim="userInfo.user_name">
            <template #prepend>
              <el-icon><Avatar /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="密码" prop="user_password" class="item">
          <el-input show-password v-model.trim="userInfo.user_password">
            <template #prepend>
              <el-icon><Lock /></el-icon>
            </template>
          </el-input>
        </el-form-item>
       
        <el-form-item label="年龄" prop="user_age" :label-width="formLabelWidth" class="item">
          <el-input v-model.number="userInfo.user_age" autocomplete="off" />
        </el-form-item>
        <el-form-item label="身份证号" prop="user_loginname" :label-width="formLabelWidth" class="item">
          <el-input maxlength="18" v-model="userInfo.user_loginname" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="家庭住址"
          prop="user_address"
          :label-width="formLabelWidth"
          v-model="userInfo.user_address"
          class="item"
        >
          <el-cascader
            size="large"
            :options="optionsArea"
            v-model="selectedOptions"
            @change="handleChange"
          >
          </el-cascader>
        </el-form-item>

        <el-form-item
          label="联系方式"
          prop="user_phone"
          :label-width="formLabelWidth"
          class="item"
        >
          <el-input v-model="userInfo.user_phone" autocomplete="off" />
        </el-form-item>
        <el-form-item label="性别" prop="user_sex" :label-width="formLabelWidth" class="item">
          <!-- <el-input v-model="formData.sex" autocomplete="off" /> -->
          <el-radio-group v-model="userInfo.user_sex" class="ml-4">
            <el-radio label="男" size="large" class="item2">男</el-radio>
            <el-radio label="女" size="large" class="item2">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="角色" prop="user_roleid" class="item">
            <div class="mb-2 flex items-center text-sm">
              <el-radio-group v-model="userInfo.user_roleid" class="ml-4">
                <el-radio label="1" size="large" class="item2">管理员</el-radio>
                <el-radio label="2" size="large" class="item2">学生</el-radio>
              </el-radio-group>
            </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" class="loginbutton" @click="onRegister">注册</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>


<script setup>
import router from "../router/index";
import { reactive,ref } from "vue";
import { ElMessage } from "element-plus";
// 引入接口文件（注册接口）
import { getRegister } from '@/api/api.js'
// import mitt from '../mitt/index'
// regionDataPlus是省市区三级联动数据（带“全部”选项）
// CodeToText是个大对象，属性是区域码，属性值是汉字 用法例如：CodeToText['110000']输出北京市
import { regionDataPlus, CodeToText } from "element-china-area-data";
const optionsArea = regionDataPlus;
const selectedOptions = ref([]);
const ref_form = ref(null)
const userInfo = reactive({
  user_name: "",
  user_password: "",
  user_sex: "",
  user_age: "",
  user_address: [],
  user_phone: "",
  user_roleid:"",
  user_loginname:''
});
// 选择地区
const handleChange = () => {
  console.log(selectedOptions.value);
  if (selectedOptions.value[0] != null && selectedOptions.value[1] != null) {
    const str =
      CodeToText[selectedOptions.value[0]] +
      CodeToText[selectedOptions.value[1]] +
      CodeToText[selectedOptions.value[2]];
    console.log(str);
    userInfo.user_address = str;
  }
};
const rules = {
  user_name:[{required:'true',trigger:'blur',pattern:(/^(?:[\u4e00-\u9fa5·]{2,16})$/),message:'请输入正确的2-5位用户名'}],
  user_password:[{required:'true',trigger:'blur',pattern:(/^\S*(?=\S{6,12})(?=\S*\d)(?=\S*[A-Z])(?=\S*[a-z])(?=\S*[!@#$%^&*? ])\S*$/),message:'请输入6-12位密码要包含大小写字母和数字以及特殊符号'}],
  user_address:[{required:'true',trigger:'blur',message:'地址不能为空'}],
  user_phone:[{required:'true',trigger:'blur',pattern:(/^1[3-9]\d{9}$/),message:'请输入正确的11位手机号'}],
  user_loginname:[{required:'true',trigger:'blur',pattern:(/^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/),message:'请输入正确的18位身份证号'}],
  user_sex:[{required:'true',trigger:'blur',message:'性别不能为空'}],
  user_age:[{required:'true',trigger:'blur',message:'年龄不能为空'}],
  user_roleid:[{required:'true',trigger:'blur',message:'角色不能为空'}],
}
const onRegister = () => {
  ref_form.value.validate((val) => {
    console.log(val + "用户");
    console.log(val + "onLogin");
    if (val) {
      getRegisterData();
    }
  });
};
const getRegisterData = async () => {
  const res = await getRegister(
    userInfo
  );
  console.log('注册',res.data);
  if (res.data.code===0) {
   console.log(res.data.data)
   ElMessage({
    message: res.data.data,
    type: "success",
  });
  router.push("/login");

  }else{
    ElMessage({
    message: res.data.message,
    type: "warning",
  });
  }
};

</script>
<style lang="less">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: url("../assets/ba.png") no-repeat;
  background-size: 100% 100% ;
  background-attachment: fixed;
  .clearfix {
    font-size: 30px;
  }
  .el-card {
    background-color: #4c9ee657;
  }
  .box-card {
    width: 450px;
    margin: 70px auto;
    color: #fff;
    border-radius: 10px;
    .item .el-form-item__label{
      color:#fff
    }
    .item2{
      color:#fff

    }
    .el-card__header {
      font-size: 34px;
    }
    .loginbutton {
      width: 100px;
      margin-left: 70px;
    }
    
  }
}
</style>